<template>
  <div class="cms-tab-card bg-white px-11 h-10 text-[#48494D]" v-if="type === 1">
    <span class="text-[#FF613F] item-border">电视剧</span>
    <span>电影</span>
    <span>综艺</span>
  </div>
  <div class="cms-tab-card bg-white px-5 h-10 text-[#FF613F]" v-else-if="type === 2">
    <span class="bg-[#FF613F] text-white tab-card_two w-1/3 text-center">电视剧</span>
    <span class="w-1/3 text-center tab-two-child">电影</span>
    <span class="w-1/3 tab-card_two text-center">综艺</span>
  </div>
  <div class="cms-tab-card bg-white px-5 h-10 text-[#FF613F]" v-else>
    <span class="flex items-center justify-between w-full tab-card-border py-0">
      <span class="bg-[#FF613F] text-white w-1/3 text-center tab-card-three">电视剧</span>
      <span class="w-1/3 text-center">电影</span>
      <span class="w-1/3 text-center">综艺</span>
    </span>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'

const props = withDefaults(defineProps<{ type: number }>(), { type: 1 })
</script>

<style scoped lang="less">
.cms-tab-card {
  @apply text-base h-full w-full flex items-center justify-between;
  span {
    @apply py-1;
  }
  .item-border {
    border-bottom: 3px solid #ff613f;
  }
  .tab-card_two {
    border: 0.5px solid #ff613f;
    border-radius: ;
  }
  .tab-two-child {
    border-top: 0.5px solid #ff613f;
    border-bottom: 0.5px solid #ff613f;
  }
  .tab-card-three {
    border-radius: 34px;
    border: 0.5px solid #ff613f;
    border-right: 0px;
  }
  .tab-card-border {
    border-radius: 34px;
    border: 0.5px solid #ff613f;
  }
}
</style>
